<template>
  <div>
          <table>
            <tr>
              <td>id</td>
              <td>用户名</td>
              <td>地址</td>
              <td>详情</td>
            </tr>
            <tr v-for="item in tables" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.tname }}</td>
              <td>{{ item.dizhi }}</td>
              <td><a href="#" @click.prevent="showDetail(item)">详情</a></td>
            </tr>
          </table>
          <router-view></router-view>
        </div>
</template>
<script>
export default {
data: function() {
        return {
          tables: [
            { id: 1, tname: '张三', dizhi: '长沙' },
            { id: 2, tname: '李四', dizhi: '北京' },
            { id: 3, tname: '王五', dizhi: '上海' },
          ]
        }
      },
      methods: {
        showDetail(item) {
          // 通过编程式导航切换到详情页面
          this.$router.push({ path: 'xiangqing', query: { id: item.id } });
        }
      }
}
</script>

<style>

</style>